import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  // 命名空间, 在调用 action 的时候会默认的设置为 action 的前缀
  name: 'counter',
  // 对该状态初始化
  initialState: { count: 1, title: 'redux toolkit pre' },
  // reducers 中的属性会自动的导出为 actions, 在组件中可以直接通过 dispatch 进行触发
  reducers: {
    increment(state, { payload }) {
      // 内置了 immutable
      console.log(state.count)
      state.count = state.count + payload
    },
    decrement(state, { payload }) {
      state.count = state.count - payload
    }
  }
})
// 导出 actions
export const { increment, decrement } = counterSlice.actions
export const counterAction = counterSlice.actions

// 内置了 thunk 插件, 可以直接处理异步请求
export const asyncDecrement = (payload: number) => (dispatch: any) => {
  setTimeout(() => dispatch(decrement(payload)), 2000)
}

// 导出 reducer, 在创建 store 时使用到
export default counterSlice.reducer
